<!-- 银行卡开户页 -->
<template>
  <div>
 <div id="info">
 <p id="titleName">银行卡开户窗口</p>
 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="width:40vw">
  <div style="display:flex">
  <el-form-item label="开户卡号" prop="cardNumber1" style="width:35vw">
    <el-input v-model="ruleForm.cardNumber1"></el-input>
  </el-form-item>
  <el-button type="success" style="height:50%;margin-left:10px" @click="getId">随机账号</el-button>
</div>

<div style="display:flex;justify-content: space-between;">
  <el-form-item label="用户姓名" prop="userName">
    <el-input v-model="ruleForm.userName"></el-input>
  </el-form-item>
  <el-form-item label="用户年龄" prop="userAge">
    <el-input v-model.number="ruleForm.userAge"></el-input>
  </el-form-item>
</div>

  <div style="display:flex">
    <el-form-item label="证件类型" prop="region" style="width:14.5vw">
    <el-select v-model="ruleForm.region" placeholder="请选择类型">
      <el-option label="身份证" value="shanghai"></el-option>
      <el-option label="港澳台身份证" value="beijing"></el-option>
      <el-option label="移民身份证" value="beijing"></el-option>
    </el-select>
  </el-form-item>
    <el-form-item label="身份证号" prop="cardId" style="width:26vw">
    <el-input v-model="ruleForm.cardId"></el-input>
  </el-form-item>
</div>
<div style="display:flex">
<el-form-item label="注册时间" required style="width:20vw">
    <el-col>
      <el-form-item prop="date1">
        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
      </el-form-item>
    </el-col>
  </el-form-item>

  <el-form-item label="性别" prop="resource" style="width:26vw">
    <el-radio-group v-model="ruleForm.resource">
      <el-radio label="男"></el-radio>
      <el-radio label="女"></el-radio>
    </el-radio-group>
  </el-form-item>
</div>

<el-form-item label="联系方式" prop="phone">
    <el-input v-model="ruleForm.phone"></el-input>
  </el-form-item>

  <el-form-item style="margin-left: 5vw;" >
    <el-button type="primary" @click="submitForm('ruleForm')" style="width:10vw">立即创建</el-button>
    <el-button @click="resetForm" style="width:10vw">返回</el-button>
  </el-form-item>
</el-form>
</div>
<Special></Special>
  </div>
</template>

<script>
import Special from '@/components/Special/special.vue';
export default {
    data() {
        return {
            ruleForm: {
                cardNumber1: '',
                cardNumber2:[],
                cardNumber:[],
                userAge: "",
                cardId: "",
                phone: "",
                userName: "",
                region: "",
                date1: "",
                resource: ""
            },
            rules: {
                userName: [
                    { required: true, message: "请输入姓名", trigger: "blur" },
                    { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" }
                ],
                cardNumber1: [
                    { required: true, message: "请获取或输入银行卡号", trigger: "blur" },
                    { min: 10, max: 20, message: "长度在 13 到 20 个字符", trigger: "blur" }
                ],
                userAge: [
                    { required: true, message: "年龄不能为空" },
                    { type: "number", message: "年龄必须为数字值" }
                ],
                cardId: [
                    { required: true, message: "请输入身份证号", trigger: "blur" },
                    { min: 10, max: 20, message: "长度在 10 到 20 个字符", trigger: "blur" }
                ],
                phone: [
                    { required: true, message: "请输入联系方式", trigger: "blur" },
                    { min: 7, max: 11, message: "长度在 7 到 11 个字符", trigger: "blur" }
                ],
                region: [
                    { required: true, message: "请选择性别", trigger: "change" }
                ],
                date1: [
                    { type: "date", required: true, message: "请选择日期", trigger: "change" }
                ],
                resource: [
                    { required: true, message: "请选择活动资源", trigger: "change" }
                ]
            }
        };
    },
    methods: {
        getId() {
            this.ruleForm.cardNumber1 = Math.floor(Math.random() * 9 + 1) + "" + Math.floor(Math.random() * 99999 + 1) + Math.floor(Math.random() * 999999 + 1);
          },
         submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.ruleForm.cardNumber2.push(this.ruleForm.cardNumber1)
                    this.$store.commit("addInfo", this.ruleForm);
                    console.log(this.ruleForm,12123121)
                    this.$router.push({"name": "info",query:{"cardid":this.ruleForm.cardId}});
                    this.$message({
                    message: `开卡成功，欢迎你${this.ruleForm.userName}`,
          type: 'success'
        });
                }
                else {
                  this.$message.error('信息填写有误！！！');
                    return false;
                }
            });
        },
        resetForm() {
          this.$router.go(-1)
        }
    },
    components: { Special }
}
</script>

<style lang="less" scoped>
  #info{
    // display: flex;
    width: 40vw;
    background-color: rgb(236, 234, 234);
    text-align: left;
    padding: 2vw;
    float: left;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
  #titleName{
    // background-color: rgb(188, 186, 186);
    font-size: 2rem;
    letter-spacing: 1rem;
    text-align: center;
  }
</style>